.scroller-container {
  background-color: #2d3748;
  color: white;
  overflow: hidden;
  padding: 1rem 0;
  cursor: pointer; 
}


.scroller-content {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: scroll var(--scroll-speed) linear infinite;
  animation-direction: var(--scroll-direction);
  transition: animation-duration 0.3s ease;
}


.scroller-text {
  padding: 0 3rem;
  font-size: 1.1rem;
  font-weight: 500;
  display: inline-block;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


.scroller-container:hover .scroller-content {
  animation-duration: calc(var(--scroll-speed, 25s) * 2);
}